<template>
	<div ref="chartPopulation" style="width: 100%; height: 100%" v-if="appStartStats"></div>
</template>

<script>
export default {
	name: 'population',
	props: {
		appStartStats: {
			type: Object,
		},
	},
	watch: {
		appStartStats: {
			handler(newVal, oldVal) {
				// 这里可以处理变化
				this.updateChart();
			},
			deep: true, // 开启深度监听
		},
	},
	created() {},
	mounted() {
		this.initChart();
	},
	data() {
		return {};
	},
	methods: {
		initChart() {
			let newFontSize = (window.innerWidth * 0.04) / 6;
			let fontColor = '#5072a4';
			this.chartDom = this.$refs.chartPopulation;
			console.log(this.$echarts)
			this.myChart = this.$echarts.init(this.chartDom);
			let avgDurationPerUdId = []; //平均时长
			let dateList = [];
			for (let item of this.appStartStats) {
				dateList.push(item.statDate);
				avgDurationPerUdId.push((item.avgDurationPerUdId / 1000 / 60).toFixed(2));
			}

			this.option = {
				textStyle: {
					fontSize: newFontSize, // 全局字体大小调整
				},
				// backgroundColor:'#11183c',
				grid: {
					left: '5%',
					right: '5%',
					top: '28%',
					bottom: '5%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					// backgroundColor: '#fff',
					border: 'none',
					extraCssText: 'background: linear-gradient(to right, #286CE9, #01D1FF);',
					textStyle: {
						color: '#FFF',
						fontSize: newFontSize, // 全局字体大小调整
					},
					formatter: function (params) {
						// for (let item of params) {
						return `<div>${params[0].seriesName}时长 : ${params[0].value}分钟</div>`;
						// }
					},
					axisPointer: {
						type: 'line',
						label: {
							show: true,
							backgroundColor: '#7B7DDC',
							// color: '#fff',
						},
					},
				},
				legend: {
					show: true,
					top: '5%',
					right: '2%',
					orient: 'vertucal',
					// icon: 'stack',
					itemGap: 4,
					itemWidth: newFontSize,
					itemHeight: newFontSize * 0.2,
					textStyle: {
						color: 'inherit',
						// fontSize: newFontSize,
					},
					data: ['平均'],
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						boundaryGap: true,
						axisLabel: {
							fontSize: newFontSize,
							color: fontColor,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#5072a4',
							},
						},
						axisTick: {
							lineStyle: {
								color: '#6EA8C2', // 红色刻度线
								width: 2,
								// 刻度线宽度为2px
							},
							alignWithLabel: true,
							show: true,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384',
							},
						},
						data: dateList,
						// data: [5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7],
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '',
						axisLabel: {
							formatter: '{value}',
							fontSize: newFontSize,
							color: '#5072a4',
						},
						axisLine: {
							lineStyle: {
								color: '#5072a4',
							},
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#11366e',
							},
						},
					},
				],
				series: [
					{
						name: '平均',
						type: 'line',
						stack: '平均',
						symbolSize: newFontSize * 0.5,
						symbol: 'circle',
						itemStyle: {
							normal: {
								color: '#05cbf1',
								lineStyle: {
									color: '#05cbf1',
									width: 1,
								},
								areaStyle: {
									// color: '#94C9EC',
									color: new this.$echarts.graphic.LinearGradient(2, 0, 0, 1, [
										{
											offset: 1,
											color: 'rgba(7,44,90,0)',
										},
										{
											offset: 0,
											color: 'rgba(114,144,89,1)',
										},
									]),
								},
							},
						},
						data: avgDurationPerUdId,
						// data: [100, 235, 56, 52, 23, 66, 80],
					},
				],
			};
			this.myChart.setOption(this.option);
			this.$nextTick(() => {
				this.resize(this.myChart, this.option);
			});
		},
		resize(myChart) {
			window.addEventListener('resize', () => {
				let FontSize = (window.innerWidth * 0.04) / 6;
				let newOption = {
					textStyle: {
						fontSize: FontSize, // 应用新的字体大小
					},
					tooltip: {
						textStyle: {
							fontSize: FontSize, // 全局字体大小调整
						},
					},
					legend: {
						itemWidth: FontSize,
						itemHeight: FontSize * 0.2,
					},
					xAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					yAxis: [
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
						{
							axisLabel: {
								fontSize: FontSize,
							},
						},
					],
					series: [
						{
							symbolSize: FontSize * 0.48,
						},
					],
				};
				this.option = { ...this.option, ...newOption };
				myChart.setOption(this.option);
				myChart.resize();
				// this.initChart();
			});
		},
		updateChart() {
			let avgDurationPerUdId = []; //平均时长
			for (let item of this.appStartStats) {
				avgDurationPerUdId.push((item.avgDurationPerUdId / 1000 / 60).toFixed(2));
			}
			this.option.series[0].data = [...avgDurationPerUdId];
			this.myChart.setOption(this.option);
		},
	},
};
</script>
<style scoped lang="scss">
.mapDom {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.echarts {
	display: flex;
	align-items: center;

	.echartsLeft {
		width: auto;
		background-image: linear-gradient((#063053, 0.3), (#395873, 0.3), (#5c7c99.3));
	}

	.echartsRight {
		width: auto;
		background-color: #000;
	}

	.echartsCenter {
		flex: 1;
		background-color: #000;
	}
}
</style>
